<script lang="ts" setup>
  import { computed } from 'vue';
  import { useRoute } from 'vue-router';
  import { useAppStore } from '/@/store/modules/app';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { useSettingsStore } from '/@/store/modules/settings';
  import SidebarItem from './SidebarItem.vue';
  import SidebarLogo from './SidebarLogo.vue';
  import { getCssVariableValue } from '/@/utils';

  const v3SidebarMenuBgColor = getCssVariableValue('--g-sidebar-menu-bg-color');
  const v3SidebarMenuTextColor = getCssVariableValue('--g-sidebar-menu-text-color');
  const v3SidebarMenuActiveTextColor = getCssVariableValue('--g-sidebar-menu-active-text-color');

  const route = useRoute();

  const sidebar = computed(() => {
    return useAppStore().sidebar;
  });
  const routes = computed(() => {
    return usePermissionStore().routes;
  });
  const showLogo = computed(() => {
    return useSettingsStore().showSidebarLogo;
  });
  const activeMenu = computed(() => {
    const { meta, path } = route;
    if (meta !== null || meta !== undefined) {
      if (meta.activeMenu) {
        return meta.activeMenu as string;
      }
    }
    return path;
  });
  const isCollapse = computed(() => {
    return !sidebar.value.opened;
  });
</script>

<template>
  <div :class="{ 'has-logo': showLogo }">
    <SidebarLogo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :collapse="isCollapse"
        :unique-opened="true"
        :default-active="activeMenu"
        :background-color="v3SidebarMenuBgColor"
        :text-color="v3SidebarMenuTextColor"
        :active-text-color="v3SidebarMenuActiveTextColor"
        mode="vertical"
      >
        <SidebarItem
          v-for="routeItem in routes"
          :key="routeItem.path"
          :item="routeItem"
          :base-path="routeItem.path"
          :is-collapse="isCollapse"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<style lang="scss">
  .sidebar-container {
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }

    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }

    .el-scrollbar__view {
      height: 100%;
    }

    .el-scrollbar__bar {
      &.is-vertical {
        right: 0;
      }

      &.is-horizontal {
        display: none;
      }
    }
  }
</style>

<style lang="scss" scoped>
  @mixin tip-line {
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background-color: var(--g-sidebar-menu-tip-line-bg-color);
      content: '';
    }
  }

  .el-scrollbar {
    height: 100%;
  }

  .has-logo {
    .el-scrollbar {
      height: calc(100% - var(--g-header-height));
    }
  }

  .el-menu {
    width: 100% !important;
    height: 100%;
    border: none;
  }

  ::v-deep(.el-menu-item),
  ::v-deep(.el-sub-menu__title),
  ::v-deep(.el-sub-menu .el-menu-item) {
    display: block;
    height: var(--g-sidebar-menu-item-height);
    line-height: var(--g-sidebar-menu-item-height);

    &:hover {
      background-color: var(--g-sidebar-menu-hover-bg-color);
    }

    * {
      vertical-align: middle;
    }
  }

  ::v-deep(.el-menu-item) {
    &.is-active {
      @include tip-line;
    }
  }

  .el-menu--collapse {
    ::v-deep(.el-sub-menu) {
      &.is-active {
        .el-sub-menu__title {
          @include tip-line;

          color: var(--g-sidebar-menu-active-text-color) !important;
        }
      }
    }
  }
</style>
